/*工具类*/ 

.zzfl{
    float: left;
}

.zzfr{
    float: right;
}

.zzclearfix::after{
    /*设置添加的子元素的内容为空*/
    content: "";
    /*设置添加的子元素为块级元素*/
    display: block;
    /*设置添加的子元素为的高度为0*/
    height: 0;
    /*设置添加的子元素看不见*/
    visibility: hidden;
    /*给添加的子元素设置clear:both*/
    clear: both;
}

.zzclearfix{
    /*兼容IE6*/
    *zoom: 1;
}

a{
    text-decoration: none;
}

li{
    list-style: none;
}

body{
    color: #333;
    background: #f7f7f7;
    font: 12px/1.6 tahoma,arial,sans-serif;
}

.nav,.nav2{
    background-color: #fff;
    .nav-in{
        // background-color: orange;
        height: 100%;
        width: 1690px;
        margin: 0 auto;
    }
    .nav-top{
        width: 100%;
        height: 33px;
        border-bottom: 1px solid #ccc;
        // background-color: #f00;
        ul{
            display: flex;
            justify-content: left;
            align-items: center;
            height: 100%;
            li{
                color: #ccc;
                margin: 0 10px;
                a{
                    color: #ccc;
                }
                i{
                    
                    color: pink;
                    font-size: 10px;
                    margin-right: 5px;
                }
                &:last-child{
                    i{
                        color: #ccc;

                    }
                }
            }
        }
    }
    .nav-bottom {
        width: 100%;
        height: 100px;
        // background-color: skyblue;
        .nav-in {
            display: flex;
            justify-content: left;
            align-items: center;

            .logo {
                img {
                    vertical-align: bottom;
                }
            }

            .menu {
                margin-left: 30px;
                font-size: 16px;

                i {
                    font-size: 20px;
                }
            }

            .search {
                display: flex;
                justify-content: left;
                margin-left: 290px;
                // height: 100%;
                input {
                    border: none;
                    outline: none;
                    height: 48px;
                }

                input[type=text] {
                    padding-left: 10px;
                    box-sizing: border-box;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                    width: 640px;
                    background-color: #f7f7f7;
                }

                input[type=button] {
                    width: 60px;
                    // border-top-right-radius: 5px;
                    // border-bottom-right-radius: 5px;
                    background: url("./../img/search-btn.png") no-repeat;
                }
            }

            .quick-list {
                display: flex;
                justify-content: left;

                li {
                    margin-left: 33px;
                    text-align: center;

                    a {
                        color: #333;
                        display: block;
                        i {
                            font-size: 30px;
                        }
                    }
                }
            }

            .login {
                margin-left: 90px;
                a {
                    display: block;
                    color: #333;
                    img {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

.nav2 .menu{
    visibility: hidden;
}

.nav2{
    width: 100%;
    position: fixed;
    left: 0;
    top: -100px;
    transition: all 1s linear 0s;
}

.main{
    
    width: 100%;
    .main-in{
        width: 1690px;
        margin:20px auto;

    .item{
        border-radius: 10px;
        background: #fff;
        width: 220px;
        overflow: hidden;
        .item-top{
            position: relative;
            &>img{
                width: 100%;
            }
            .play{
                position: absolute;
                top: 10px;
                left: 10px;
            }
            .title{
                padding: 0 10px;
                box-sizing: border-box;
                position: absolute;
                bottom: 0px;
                left: 10px;
                height: 40px;
                line-height: 40px;
                color: #fff;
                &>img{
                    vertical-align: text-bottom;
                    margin-right: 5px;
                }
            }
        }
        .item-bottom{
            padding: 10px;
            a{
                padding: 3px;
                border-radius: 3px;
                color: #333;
                background-color: #ccc;
                &>img{
                    width: 14px;
                    vertical-align: text-bottom;
                }
            }
        }
    }
    }
}